<template>
  <div class="mine-collection">
    <div class="emptyBox" v-if="showBlur">
      <img src="~@/assets/images/manhua/quesheng@2x.png">
      <div class="decorate">暂无数据~</div>
      <!-- <div class="toHome" @click="()=>$router.replace('/home')">去逛逛</div> -->
    </div>
    <section class="list-all">
      <van-list
        v-model="loading"
        :finished="!needLoading"
        finished-text=""
        @load="load"
      >
        <div class="list-component">
          <div class="list-box">
            <div class="list-item" @click="itemClick(item)" v-for="(item, index) in dataList" :key="index">
              <div class="list-img">
                <van-image
                  fit="cover"
                  width="90"
                  height="90"
                  lazy-load
                  :src="item.listPic + '?imageView2/2/w/200/h/200'"
                />
              </div>
              <div class="list-content">
                <div class="list-title">{{item.title}}</div>
                <div class="list-descripe-box">
                  <div class="list-descripe">
                    <div class="line">{{item.buyerName}} <span>{{item.buyerMobile}}</span></div>
                    <div class="line">带看时间: {{item.visitTime}} </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <list-view ref="listView" @itemClick="itemClick" :listData="dataList"></list-view> -->
      </van-list>
    </section>
  </div>
</template>

<script>
import ListView from '@/components/listview/listview'
import { summaryMixin } from '@/base/mixins/tableMix'
import { toGoods } from '@/utils'
import { mineApi } from '@/api'
export default {
  name: 'mine-appoint',
  mixins: [summaryMixin],
  components: {
    ListView
  },
  async created() {
    this.getBookmarks()
  },
  data() {
    return {
      dataList: [
      ],
      type: 1,
      showBlur: false
    }
  },
  methods: {
    async getBookmarks(index) {
      const res = await mineApi.visitList({
        pageNo: 1,
        pageSize: 10,
        type: this.type
      })
      if (res.code !== 200) {
        this.showBlur = true
        return
      }
      this.dataList = res.data.records
      console.log('this.dataList', this.dataList)
      if (!this.dataList || !this.dataList.length) {
        this.showBlur = true
      }
    },
    async  _getDataList(data) {
      console.log('data', this.limit, this.page)
      const res = await mineApi.visitList({
        type: this.type,
        pageSize: this.limit,
        pageNo: this.page
      })
      if (!res.data) {
        res.data = []
        return []
      }
      this.dataList = this.dataList.concat(res.data.records)
      this.needLoading = !(this.limit > this.dataList.length)
      console.log('this.needLoading', this.needLoading)
      return res.data
    },
    itemClick(item) {
      toGoods(item, this)
    },
    async deleteCollecttArray(item) {
      console.log('item', item)
      const res = await mineApi.deleteCollection({ id: item.bookId })
      if (res.code !== 200) {
        return
      }
      this.$toast('删除成功')
      this.getBookmarks()
      console.log('item', item)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/assets/css/mixin.scss";
  @import 'src/assets/css/variables.scss';
.mine-collection{
  overflow: hidden;
  background-color: #fafafa;
  min-height: 100vh;
  font-size: 16px;
}
.list-all{
  margin-top: 10px;
}
.list-component{
    padding: 0 10px;
    background-color: #fff;
  }
  .list-box{
    background-color: #fff;
    .list-item{
      display: flex;
      line-height: 20px;
      padding: 10px 0;
      border-bottom: 1px solid $color-border;
      &:nth-last-child(1) {
        border-bottom: none;
        margin-bottom: 0px;
      }
      .list-img{
        margin-right: 10px;
        img{
          width: 90px;
        }
      }
      .list-content{
        display: flex;
        flex: 1;
        flex-direction: column;
        .list-title{
          color: #1a1a1a;
        }
        .list-address{
          color: #666;
        }
        .list-descripe-box{
          flex: 1;
          color: #666;
          font-size: 14px;
          margin-top: 5px;
          flex-direction: column;
          display: flex;
          .list-descripe{
            margin-bottom: 5px;
            display: flex;
            height: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            .line{
              display: flex;
              width: 100%;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }
    }
  }
</style>
